<template>
    <div>
        <button @click="drawModeTest">绘制测试</button>
        <button @click="editModeTest">编辑测试</button>
        <button @click="selectModeTest">单选测试</button>
        <button @click="bindMap.clearPlotting()">清空测试</button>
        <button @click="json2PlottingObj">反序列化测试</button>
        <button @click="deleteTest">删除测试</button>
        <button @click="searchTest">查询测试</button>
        <button @click="selectTest">选中测试</button>
        <button @click="unselectTest">取消选中测试</button>
        <button @click="getFeatureStyleTest">样式获取测试</button>
        <button @click="updateFeatureStyleTest">更新样式测试</button>
        <button @click="getAllPlottingObjTest">获取所有标号测试</button>
        <div>
            <select name="" v-model="animationType">
                <option
                    :value="item.value"
                    v-for="(item, index) in animationItem"
                    :key="index"
                >
                    {{ item.label }}
                </option>
            </select>
            <button @click="createAnimation">创建动画</button>
            <button @click="animationPlay">播放</button>
            <button @click="animationPause">暂停</button>
            <button @click="animationStop">停止</button>
            <button @click="animationReset">复位</button>
            <button @click="removeAnimation">删除动画</button>
            <button @click="removeAllAnimation">删除所有动画</button>
        </div>
    </div>
</template>

<script>
const plottingJson = require('./plotting.json')

const id = '03a252d8-6ef9-4c58-9a45-db71f9ea1d5f'
const id2 = '04fc22df-56db-4774-8b0f-4338f1345270'

export default {
    props: ['bindMap'],
    data() {
        return {
            animationType: '',
            animationItem: [
                {
                    label: '属性动画',
                    value: 'ATTRIBUTE',
                },
                {
                    label: '闪烁动画',
                    value: 'BLINK',
                },
                {
                    label: '生长动画',
                    value: 'GROW',
                },
                {
                    label: '旋转动画',
                    value: 'ROTATE',
                },
                {
                    label: '比例动画',
                    value: 'SCALE',
                },
                {
                    label: '显隐动画',
                    value: 'SHOW',
                },
                {
                    label: '路径动画',
                    value: 'WAY',
                },
            ],
        }
    },
    mounted() {
        // 标号被绘制完成 - featureadded
        this.bindMap.$on('featureadded', evt =>
            console.log('featureadded', evt)
        )
        // 标号被选中事件（单选，用于select模式） - featureselected
        this.bindMap.$on('featureselected', evt =>
            console.log('featureselected', evt)
        )

        // 标号被编辑事件 - featuresmodified
        this.bindMap.$on('featuresmodified', evt =>
            console.log('featuresmodified', evt)
        )
        // 标号被选中事件 - featuresselected
        this.bindMap.$on('featuresselected', evt =>
            console.log('featuresselected', evt)
        )
        // 标号被释放事件 - featuresunselected
        this.bindMap.$on('featuresunselected', evt =>
            console.log('featuresunselected', evt)
        )

        /*
        this.bindMap.$on('featureadded', feature => {
            // 序列化 测试
            const f = this.bindMap.plottingObj2Json(feature)
            console.log(f);
        })
        */
        // 动画执行
        setInterval(() => {
            this.bindMap.execute()
        }, 100)
    },
    methods: {
        drawModeTest() {
            this.bindMap.setPlottingMode('draw', { lib: 22, code: 1001 })
        },
        editModeTest() {
            this.bindMap.setPlottingMode('edit')
        },
        selectModeTest() {
            this.bindMap.setPlottingMode('select')
        },
        json2PlottingObj() {
            this.bindMap.json2PlottingObj(plottingJson, fs => {
                console.log(fs)
            })
        },
        /* 下列方法 支持传递 单个 或者 多个id */
        searchTest() {
            console.log(this.bindMap.getPlottingObj([id, id2]))
        },
        deleteTest() {
            this.bindMap.deletePlottingObj([id, id2])
        },
        selectTest() {
            this.bindMap.selectPlottingObj([id, id2])
        },
        unselectTest() {
            this.bindMap.unselectPlottingObj(id)
            // 为空，取消全部选中
            // this.bindMap.unselectPlottingObj()
        },
        getFeatureStyleTest() {
            console.log(this.bindMap.getPlottingObjStyle(id))
        },
        updateFeatureStyleTest() {
            const ups = []

            const update = this.bindMap
                .getPlottingObjStyle(id)
                .find(s => s.name === '线颜色')

            // 线段颜色改成绿色
            update.value = '#00ff00'
            ups.push(update)

            const update2 = this.bindMap
                .getPlottingObjStyle(id)
                .find(s => s.name === '高度')
            if (update2) {
                update2.value = 0
                ups.push(update2)
            }

            // 更新样式
            this.bindMap.updatePlottingObjStyle(id, ups)
        },
        getAllPlottingObjTest() {
            console.log(this.bindMap.getAllPlottingObj())
        },
        // 创建动画
        createAnimation() {
            const animats = []
            ;[id, id2].forEach(item => {
                animats.push({
                    id: item,
                    // 动画名称 动画的唯一标识。
                    name: item,
                    // 动画类型
                    type: this.animationType,
                    // 动画设置
                    options: {
                        duration: 60,
                    },
                })
            })
            this.bindMap.createAnimation(animats)
        },
        // 播放
        animationPlay() {
            console.log('播放', this.animationType)

            this.bindMap.play()
        },
        // 暂停
        animationPause() {
            this.bindMap.pause()
        },
        // 停止
        animationStop() {
            this.bindMap.stop()
        },
        // 复位
        animationReset() {
            this.bindMap.reset()
        },
        removeAnimation() {
            this.bindMap.removeAnimation([id, id2])
        },
        removeAllAnimation() {
            this.bindMap.removeAllAnimation()
        },
    },
}
</script>

<style scoped>
button {
    margin-right: 10px;
}
</style>
